<template>
	<div>
		<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>	
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>		
					</div>
				</div>
		</div>



		<!-- 图片列表区 -->
		<div class="imgplay">
			<ul>
				<router-link to="/home/imgInfo/88" tag="li">
					<img src="../../images/meizi1.jpg"  alt="">
					<div>
						<h4>烟花易冷</h4>
						<p>雨纷纷旧故里草木深，我听闻你始终一个人，城郊牧笛声，落在那座野村，缘分落地生根是我们。
							伽蓝寺听雨声盼永恒
						</p>
					</div>	
				</router-link>
				<router-link to="/home/imgList/88" tag="li"><img src="../../images/meizi2.jpg"  alt="">
					<div>
						<h4>烟花易冷</h4>
						<p>雨纷纷旧故里草木深，我听闻你始终一个人，城郊牧笛声，落在那座野村，缘分落地生根是我们。
							伽蓝寺听雨声盼永恒
						</p>
					</div>	
				</router-link>
				<router-link to="/home/imgList/88" tag="li"><img src="../../images/meizi3.jpg"  alt="">
					<div>
						<h4>烟花易冷</h4>
						<p>雨纷纷旧故里草木深，我听闻你始终一个人，城郊牧笛声，落在那座野村，缘分落地生根是我们。
							伽蓝寺听雨声盼永恒
						</p>
					</div>	
				</router-link>
				<router-link to="/home/imgList/88" tag="li"><img src="../../images/meizi4.jpg"  alt="">
					<div>
						<h4>烟花易冷</h4>
						<p>雨纷纷旧故里草木深，我听闻你始终一个人，城郊牧笛声，落在那座野村，缘分落地生根是我们。
							伽蓝寺听雨声盼永恒
						</p>
					</div>	
				</router-link>
				
				
			</ul>
		</div>
	</div>
</template>


<script>
	import mui from '../../lib/mui/js/mui.min.js'

	export default{
		data(){
			return{}
		},
		mounted(){
			mui('.mui-scroll-wrapper').scroll({
				deceleration:0.0005
			})
		}
	}
</script>


<style lang="scss" scopd>
	*{
		touch-action: pan-y
	}
	.imgplay{
		ul{
			padding:0 10px;
			margin:0;
			padding-bottom:0;
		}
		

		li{
			list-style:none;
			box-shadow:5px 0 2px #666;
			position:relative;
			margin-bottom:10px;
			div{
				position:absolute;
				bottom:0;
				background:rgba(0,0,0,0.5);
				padding:3px 5px;
				h4,p{
					color:#fff;
				}
			}
		}
		img{
			width:100%;
		}
	}
	.mui-scroll{
		height:30px;
	}
</style>